<template>
  <div>
    <!-- 三级分类 -->
    <Seletor></Seletor>
    <el-card style="margin: 10px">
      <!-- 添加spu按钮 -->
      <el-button
        type="primary"
        style="margin-bottom: 5px"
        size="small"
        icon="el-icon-plus"
        >添加SPU</el-button
      >
      <!-- spu管理页表格 -->
      <el-table :data="Spulist" border style="width: 100%">
        <el-table-column type="index" label="序号" width="180">
        </el-table-column>
        <el-table-column prop="spuName" label="SPU名称" width="180">
        </el-table-column>
        <el-table-column prop="description" label="spu描述"> </el-table-column>
        <el-table-column prop="address" label="操作">
          <template v-slot="{ row, $index }">
            <el-tooltip content="添加sku">
              <el-button
                type="primary"
                icon="el-icon-plus"
                size="small"
                @click="toAddSku(row)"
              ></el-button>
            </el-tooltip>
            <el-tooltip content="修改Spu">
              <el-button
                type="primary"
                icon="el-icon-edit"
                size="small"
                @click="toEditSpu(row)"
              ></el-button>
            </el-tooltip>
            <el-tooltip content="查看sku">
              <el-button
                type="info"
                icon="el-icon-info"
                size="small"
                @click="tolookspu(row)"
              ></el-button>
            </el-tooltip>
            <el-tooltip content="删除spu">
              <el-button
                type="danger"
                icon="el-icon-delete"
                size="small"
                @click="deleteSpu(row)"
              ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[3, 5, 10, 20]"
        :page-size="pageSize"
        layout="prev, pager, next, jumper,->,sizes,total"
        :total="pagecount"
        :small="small"
      >
      </el-pagination>
    </el-card>
    <!-- 查看sku信息弹出dialog对话框 -->
    <el-dialog title="SKU信息" :visible.sync="dialogTableVisible">
      <el-table :data="skuList">
        <el-table-column
          property="skuName"
          label="名称"
          width="150"
        ></el-table-column>
        <el-table-column
          property="price"
          label="价格"
          width="200"
        ></el-table-column>
        <el-table-column
          property="weight"
          label="重量(KG)"
          width="200"
        ></el-table-column>
        <el-table-column
          property="name"
          label="默认图片"
          width="200"
        >
          <template v-slot="{row}">
            <img :src="row.skuDefaultImg" alt="" width="35%">
          </template>
        </el-table-column>
        <el-table-column property="address" label="地址"></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import Seletor from "@/components/Seletor";
import opp from "@/store/modules/opp";
import { reqgetBaseSpu, reqDelOneSpu,reqGetOneskuInfo } from "@/api/product/spu";
import { mapState } from "vuex";
export default {
  components: {
    Seletor,
  },
  data() {
    return {
      Spulist: [],
      pageSize: 5,
      currentPage: 1,
      pagecount: 0,
      small: false,
      dialogTableVisible : false,
      skuList:[],
    };
  },
  methods: {
    //获取spu数据
    async getSpuList() {
      const result = await reqgetBaseSpu(this.currentPage, this.pageSize, {
        category3Id: opp.state.Category3Id,
      });
      this.Spulist = result.data.records;
      this.pagecount = result.data.total;
    },
    //选择一页渲染多少条的业务函数
    handleSizeChange(val) {
      this.currentPage = 1;
      this.pageSize = val;
      this.getSpuList();
    },
    //选择第几页应跳转到第几页
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getSpuList();
    },
    //删除一条spu并刷新页面
    async deleteSpu({ id }) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          await reqDelOneSpu(id);
          this.getSpuList();
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //查看sku
    async tolookspu({id}){
     const result = await reqGetOneskuInfo(id)
     if(result.code===200){
      //打开dialog对话框
      this.dialogTableVisible = true
      this.skuList = result.data
     }
    },
    // 添加sku
    async toAddSku(){
      this.$router.push({path:'/AddSku'})
    }
  },
  computed: {
    ...mapState("opp", ["Category1Id", "Category2Id", "Category3Id"]),
  },
  //监听category3Id的变化 从而发请求 只有有3id的时候才会发请求
  watch: {
    // 如果 `question` 发生改变，这个函数就会运行
    Category3Id: function (newQuestion, oldQuestion) {
      console.log(111, "fff");
      if (!newQuestion) return;
      this.getSpuList();
    },
  },
};
</script>

<style>
</style>